<template>
    <div class="box-column">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :isCheckPermissions="false"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns" ref="grid">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import moment from 'moment';
@Component({
    mixins: [mixinTableStore, mixinTableHeader]
})
export default class monthListTable extends Vue {
    @Action("kqLog/monthList") getList: any;
    defaultTime: string = moment()
        .subtract(+1, 'months')
        .format('YYYYMM');

    dataStore: any = {
        proxy: {
            autoLoad: false
        }
    };
    created() {
        this.dataStore.load({
            period_at: this.defaultTime
        });
    }

    table: any = {
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                width: 100,
                title: "月份",
                field: "period_at"
            },
            {
                width: 150,
                fixed: 'left',
                title: "部门",
                field: "section_name"
            },
            {
                width: 120,
                title: "姓名",
                fixed: 'left',
                field: "user_xm"
            },
            {
                width: 120,
                title: "1号",
                field: "day01"
            },
            {
                width: 120,
                title: "2号",
                field: "day02"
            },
            {
                width: 120,
                title: "3号",
                field: "day03"
            },
            {
                width: 120,
                title: "4号",
                field: "day04"
            },
            {
                width: 120,
                title: "5号",
                field: "day05"
            },
            {
                width: 120,
                title: "6号",
                field: "day06"
            },
            {
                width: 120,
                title: "7号",
                field: "day07"
            },
            {
                width: 120,
                title: "8号",
                field: "day08"
            },
            {
                width: 120,
                title: "9号",
                field: "day09"
            },
            {
                width: 120,
                title: "10号",
                field: "day10"
            },
            {
                width: 120,
                title: "11号",
                field: "day11"
            },
            {
                width: 120,
                title: "12号",
                field: "day12"
            },
            {
                title: "13号",
                width: 120,
                field: "day13"
            },
            {
                width: 120,
                title: "14号",
                field: "day14"
            },
            {
                width: 120,
                title: "15号",
                field: "day15"
            },
            {
                width: 120,
                title: "16号",
                field: "day16"
            },
            {
                width: 120,
                title: "17号",
                field: "day17"
            },
            {
                width: 120,
                title: "18号",
                field: "day18"
            },
            {
                width: 120,
                title: "19号",
                field: "day19"
            },
            {
                width: 120,
                title: "20号",
                field: "day20"
            },
            {
                width: 120,
                title: "21号",
                field: "day21"
            },
            {
                width: 120,
                title: "22号",
                field: "day22"
            },
            {
                width: 120,
                title: "23号",
                field: "day23"
            },
            {
                width: 120,
                title: "24号",
                field: "day24"
            },
            {
                width: 120,
                title: "25号",
                field: "day25"
            },
            {
                width: 120,
                title: "26号",
                field: "day26"
            },
            {
                width: 120,
                title: "27号",
                field: "day27"
            },
            {
                width: 120,
                title: "28号",
                field: "day28"
            },
            {
                width: 120,
                title: "29号",
                field: "day29"
            },
            {
                width: 120,
                title: "30号",
                field: "day30"
            },
            {
                width: 120,
                title: "31号",
                field: "day31",
                visible: true
            }
        ]
    };



    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                fieldType: 'date',
                label: '周期',
                field: 'period_at',
                type: 'month',
                value: this.defaultTime,
                pickerOptions: {
                    disabledDate: (time: any) => {
                        const date = time.getTime();
                        return !(
                            date > moment().subtract(+12, 'months') &&
                            date < moment().subtract(1, 'months')
                        );
                    }
                },
                valueFormat: 'yyyyMM'
            },
            {
                field: 'section_name',
                label: '部门'
            },
            {
                field: "user_xm",
                label: "姓名"
            }
        ]
    };
}
</script>

